<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人页面</title>
		<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" />   <!--//static/css/bootstrap.min.css-->
		<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/public.css') }}" />   <!--//static/css/public.css-->
		<style type="text/css">
			.container-fluid {
				width: 100%;
				height: 100%;
			}
			a {
				color: #333;
				text-decoration: none;
			}

			#myTab li.active {
				background: #fff;
			}

			.row {
				width: 100%;
				height: 100%;
			}

			.nav-tabs {
				border-bottom: none;
			}

			.nav-tabs>li>a {
				margin-right: 2px;
				line-height: 1.42857143;
				border: none;
				border-radius: 0;
			}

			.tad_heed {
				height: 100%;
				border: 1px solid #ccc;
				padding: 0;
			}

			.nav-tabs>li.active>a,
			.nav-tabs>li.active>a:focus,
			.nav-tabs>li.active>a:hover {
				color: #fff;
				cursor: default;
				background-color: #ccc;
				border: 1px solid #ddd;
				border-bottom-color: transparent;
			}

			#myTab li {
				width: 100%;
				height: 45px;
				padding: 0;
				text-align: center;
			}

			#myTabContent {
				height: 100%;
			}
			.tad_mng{
				width: 95%;
				height: 50px;
				border-bottom: 1px solid #ccc;
				margin: 0 auto;
				line-height: 50px;
				text-indent: 20px;
				font-size: 16px;
			}
		</style>
	</head>
	<body>
		<div class="container-fluid" style="padding-top: 10px;" id="app">
			<div class="row">
				<div class="col-md-2 tad_heed" style="padding-top: 10px;margin-right: 3%;">
					<ul id="myTab" class="nav nav-tabs">
						<li class="li_text" v-for="(item,index) in personalList"
							v-bind:class="{active:item.isActive}" @click="changePersonal(item,index)">
							<a>{{item.name}}</a>
						</li>
					</ul>
				</div>
				<div class="col-md-9 tad_heed" style="height: 100%;">
					<div class="tad_mng" style="font-size: 16px;">{{titleData}}</div>
					<form class="form-horizontal" role="form" style="height: 100%;">
						<div id="myTabContent" class="tab-content" style="padding-top: 10px;">
							<div v-if="oldindex==0">
								<div class="form-group">
									<label class="col-sm-1 control-label">账号</label>
									<div class="col-sm-4">
										<input type="text" class="form-control" placeholder="请输入账号" id="account">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-1 control-label">工号</label>
									<div class="col-sm-4">
										<input type="text" class="form-control" placeholder="请输入工号" id="safe-num">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-1 control-label">姓名</label>
									<div class="col-sm-4">
										<input type="text" class="form-control" placeholder="请输入姓名" id="name">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-1 control-label">性别</label>
									<div class="col-sm-4">
										<input type="text" class="form-control" placeholder="请输入性别" id="gender">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-1 control-label">公司</label>
									<div class="col-sm-4">
										<input type="text" class="form-control" placeholder="请输入公司" id ="organization">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-1 control-label">部门</label>
									<div class="col-sm-4">
										<input type="text" class="form-control" placeholder="请输入部门" id="department">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-1 control-label">岗位</label>
									<div class="col-sm-4">
										<input type="text" class="form-control" placeholder="请输入岗位" id="quater">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-1 control-label">角色</label>
									<div class="col-sm-4">
										<input type="text" class="form-control" placeholder="请输入角色" id = 'role'>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-1 control-label">备注</label>
									<div class="col-sm-4">
										<textarea name="" rows="" cols="" style="width: 100%;height:45px;border-radius: 4px;" id="description"></textarea>
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-offset-1 col-sm-4">
										<button type="submit" class="btn btn-primary btn-lg btn-block" id="user-edit">提交</button>
									</div>
								</div>
							</div>
							<div v-if="oldindex==1" style="padding-top: 10px;">
								<div class="form-group">
									<label class="col-sm-1 control-label">旧密码</label>
									<div class="col-sm-4">
										<input type="txt" class="form-control" pattern="请输入旧密码" id="old-password">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-1 control-label">新密码</label>
									<div class="col-sm-4">
										<input type="text" class="form-control" placeholder="请输入新密码" id="new-password">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-1 control-label">重复新密码</label>
									<div class="col-sm-4">
										<input type="text" class="form-control" placeholder="请输入重复新密码" id="repassword">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-1 control-label">验证码</label>
									<div class="col-sm-4">
										<input type="text" class="form-control" placeholder="请输入验证码">
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-offset-1 col-sm-4">
										<button type="submit" class="btn btn-primary btn-lg btn-block" id="password-btn">提交</button>
									</div>
								</div>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>   <!--//static/js/jquery.min.js-->
	<script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>  <!--//static/js/bootstrap.min.js-->
	<script type="text/javascript" src="{{ url_for('static', filename='js/vue.min.js') }}"></script>   <!--//static/js/vue.min.js-->
	<script type="text/javascript">
		$.ajax({
			type: "POST",    // 提交数据的类型
			headers: {
				"token":"e5753707aa194dde97c89933195cfead_4f9734545851159b8c923bd410e2ca7c"
			},
			url: "/core/user/get_user_by_token/",
			data: {},
			async: false,
			success: function(data){
				if(data.success==1){
					$("#account").text(data.safe_code);
					$("#safe-num").text(data.safe_code);
					$("#name").text(data.name);
					$("#gender").text(data.sex);
					$("#organization").text(data.organization),
					$("#department").text(data.department),
					$("#roles").
				}
				else{
					alert(data.error_msg);
				}
			},
			error: function(){
				alert("用户数据请求失败")
			}
		})
		var app = new Vue({
		  el: '#app',
		  data: {
		  	oldindex:0,
		    personalList:[
		    	{
		    		name:'个人信息',
		    		isActive:true
		    	},
		    	{
		    		name:'修改密码',
		    		isActive:false
		    	},
		    ],
		    titleData:'个人信息',

		  },
		  methods:{
		  	changePersonal:function(item,index){
		  		//修改状态
			app.personalList[app.oldindex].isActive = false;
			app.oldindex = index;
			app.personalList[index].isActive = true;
			//添加title
			console.log(index)
			app.titleData=item.name;
		  	}
		  }
		})
		 $("#user-edit").click(function () {
    		$.ajax({
            type: "POST",   //提交的方法
            url:"/core/user/edit_user/", //提交的地址
            data:{
            "account":$("#account").val(),
            "safe_num":$("#safe-num").val(),
            "name":$("#name").val(),
            "gender":$("#gender").val(),
            "organization":$("#organization").val(),
            "job_num":$("#job-num").val(),
            "description":$("#job-num").val(),
            "role":$("#role").val()
            },// 序列化表单值
            async: false,
            success: function(data) {  //成功
                if(data.success ==1){
					alert("编辑成功");
                } else {
                	alert(data.error_msg);
                }
            }
         });
       });
       $("#password-btn").click(function () {
    		$.ajax({
            type: "POST",   //提交的方法
            url:"/core/user/change_password/", //提交的地址
            data:{
            "old_password":$("#old-password").val(),
            "new_password":$("#new-password").val(),
            "repassword":$("#repassword").val()
            },// 序列化表单值
            async: false,
            success: function(data) {  //成功
                if(data.success ==1){
					alert("编辑成功");
                } else {
                	alert(data.error_msg);
                }
            }
         });
       });
	</script>
</html>
